<template>
  <div class="box">
        <div class="head">
            <div class="one-avatar">
                <div class="avatar">头像</div>
                <img src="/static/imgs_s09/s09_avatar.png" alt="">
            </div>
            <div class="two-name">
                <span class="name">名字</span>
                <span class="jy">久颜</span>
            </div>
            <div class="three-wxnumber">
                <span class="wxnumber">微信号</span>
                <span class="userid">wxid_9y8ikmnba70k12</span>
            </div>
        </div>

        <span class="affirm">确认报名</span>
        <span class="footer">*中奖信息会通过小程序系统消息的形式 推送到您的账号里，请注意留意！</span>

    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .box {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        .head {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 375px;
            height: 176px;
        }

        .head .one-avatar {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 75px;
            width: 375px;
            line-height: 75px;
            border-bottom: 1px solid #ddd;
        }

        .one-avatar .avatar {
            margin-left: 14px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(48, 47, 47, 1);
        }

        .one-avatar img {
            height: 47px;
            width: 47px;
            margin-left: 268px;
        }

        .two-name {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 50px;
            width: 375px;
            border-bottom: 1px solid #ddd;
        }

        .two-name .name {
            display: inline-block;
            width: 30px;
            height: 14px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(48, 47, 47, 1);
            margin-left: 14px;
        }

        .two-name .jy {
            display: inline-block;
            width: 30px;
            height: 14px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            margin-left: 288px;
        }

        .three-wxnumber {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 50px;
            width: 375px;
            border-bottom: 1px solid #ddd;
        }

        .three-wxnumber .wxnumber {
            display: inline-block;
            width: 50px;
            height: 14px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(48, 47, 47, 1);
            margin-left: 14px;
        }

        .three-wxnumber .userid {
            display: inline-block;
            width: 30px;
            height: 14px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            margin-left: 155px;
        }

        .affirm {
            width: 302px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 15px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            background: rgba(50, 177, 108, 1);
            border-radius: 19px;
            margin-top: 69px;
            
        }

        .footer {
            width: 200px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 11px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            margin-top: 20px;
        }
    </style>
